<template>
    <div class="tingbox">
        <div class="dbl" :style="{width:kuan+'px'}">
            <van-tabs v-model="topkey"  @click="panduan(0)">
                <van-tab title="全部"></van-tab>
                <van-tab title="男歌手"></van-tab>
                <van-tab title="女歌手"></van-tab>
                <van-tab title="乐队"></van-tab>
            </van-tabs>
        </div>
        <div class="cbl">
            <van-sidebar v-model="leftkey" @change="panduan(0)">
                <van-sidebar-item title="全部" />
                <van-sidebar-item title="华语" />
                <van-sidebar-item title="欧美" />
                <van-sidebar-item title="日本" />
                <van-sidebar-item title="韩国" />
                <van-sidebar-item title="其他" />
            </van-sidebar>
        </div>
        <div class="ol"  :style="{width:kuan+'px'}">
            <ol @click="panduan(0)" ref="ol">
                <li v-for="(item,index) in zm" :key="item" :class="{'liactive':zmkey==index}" @click="zmkey=index" >
                    {{item}}
                </li>
            </ol>
        </div>
        <div class="zw"></div>
        <div class="zt" :style="{width:kuan+'px'}">
            <ul class="ztnr" v-show="!zs" ref="ul">
                <li v-for="item in renarr" :key="item.id">
                    <smallsinger v-bind:mysrc="item.src" v-bind:myid="item.id" v-bind:myname="item.name"></smallsinger>
                </li>
                <li class="zjload" v-show="!meile">
                    <loading></loading>
                </li>
            </ul>
            <loading v-show="zs" class="jiazaiz"></loading>
        </div>
    </div>
</template>
<script>
import loading from "../small/loading.vue"
import smallsinger from "../small/smallsinger.vue"
export default {
    name:"ting",
    components:{
        loading,
        smallsinger
    },
    data(){
        return {
            gaodu:0,
            topkey: 0,
            leftkey: 0,
            zmkey:0,
            next:0,
            kuan:0,
            zs:true,
            meile:false,
            zm:['默认','热门','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'],
            renarr:[]
        }
    },
    created(){
        this.panduan(0)
        let aaa = document.documentElement.clientWidth || documentbody.clientWidth;
        this.kuan = aaa-80
        
        // 创建组件的时候回到最开始的地方
        document.documentElement.scrollTop = 0
        document.body.scrollTop = 0
        // 添加滚动事件
        window.addEventListener('scroll', this.listscroll)
        document.body.addEventListener('scroll', this.listscroll)
    },
    methods:{
        aaa(index){
            // console.log(index)
        },
        panduan(firstnum){
            let a = 0
            let b = 0
            let c = 0
            switch (this.topkey) {
                case 0:
                    a = -1
                    break;
                case 1:
                    a = 1
                    break;
                case 2:
                    a = 2
                    break;
                case 3:
                    a = 3
                    break;
            }
            switch (this.leftkey) {
                case 0:
                    b = -1
                    break;
                case 1:
                    b = 7
                    break;
                case 2:
                    b = 96
                    break;
                case 3:
                    b = 8
                    break;
                case 4:
                    b = 16
                    break;
                case 5:
                    b = 0
                    break;
            }
            switch (this.zmkey) {
                case 0:
                    c = 0
                    break;
                case 1:
                    c = -1
                    break;
                default:
                    c = this.zm[this.zmkey]
                    break;
            }
            this.getdata(a,b,c,firstnum)
        },
        getdata(a,b,c,thenum){
            if(thenum == 0){
                this.zs = true
                this.renarr = []
                this.next = 0
            }
            axios.get(`https://apis.netstart.cn/music/artist/list?type=${a}&area=${b}&initial=${c}&offset=${this.next*30}`).then(
                res=>{
                    // console.log(res)
                    let arr = res.data.artists
                    if(arr.length == 0){
                        this.meile = true
                    }
                    for(let i = 0;i<arr.length;i++){
                        let obj = {}
                        obj.name = arr[i].name
                        obj.id = arr[i].id
                        obj.src = arr[i].picUrl
                        this.renarr.push(obj)
                    }
                    this.zs = false
                },
                err=>{
                    console.log(err)
                }
            )
        },
        listscroll(){
            if(this.$refs.ul !== undefined){
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                let olheight = this.$refs.ol.offsetHeight
                //变量windowHeight是可视区的高度
                let windowHeight = document.documentElement.clientHeight || documentbody.clientHeight;
                if(scrollTop+windowHeight >= olheight+60+this.$refs.ul.scrollHeight-10){
                    clearTimeout(this.timer)
                    this.timer = setTimeout(()=>{
                        this.next += 1
                        // console.log("到底了")
                        this.panduan(1)
                    },1000)
                }
            }
        },
    }
}
</script>
<style lang="less" scoped>
.tingbox{
    height:100%;
}
.cbl{
    position:fixed;
    left:0px;
    height:100%;
    background: #f7f8fa;
    padding-top:60px;
    box-sizing:border-box;
}
.dbl{
    position:fixed;
    top:0px;
    padding-left:80px;
    // padding-top:10px;
    background-color: #f7f8fa;
}
.zt{
    margin-left:80px;
    .ztnr{
        padding-bottom:60px;
        display:flex;
        flex-wrap: wrap;
        justify-content: space-around;
        li{
            padding:10px 0px;
        }
    }
}
.zw{
    height:110px;
    width:100%;
}
.jiazaiz{
    height:300px;
}
.zjload{
    height: 30px;
    width: 100%;
}
.ol{
    position: fixed;
    top:60px;
    margin-left:80px;
    overflow-x: scroll;
    padding-top:5px;
    // padding-bottom:5px;
    background:white;
    line-height: 20px;
    &::-webkit-scrollbar { width: 0 !important }
    ol{
        width:1150px;
        li{
            display: inline-block;
            flex-shrink: 0;
            line-height:20px;
            // width:30px;
            padding: 5px 15px;
        }
        .liactive{
            color:#4475b7;
            font-weight: 600;
        }
    }
}
</style>